<template>
	<div class="search">	
        <div class="pic">
            <img src="../img/find.png" />
            <span style="font-size:14px;margin:0 10px;font-weight: 600;">{{$t('common.filterLabel')}}</span> 
            <span class="line"></span>
        </div>
        <div class="inputs-wrap">
            <div class="inputs"> 
                <div v-for ="item in searchFiled" class="items">
                    <template v-if="item.type=='select_link'">    
                        <div>
                            <label>{{item.label[0]}}：</label>
                            <select  v-model='link1' @change='searchEvent'> 
                                <option v-for ="meun in item.meuns" :value="meun.val">{{meun.label}}</option>
                            </select>
                        </div>                
                        <div style="margin-left: 10px;">   
                            <label>{{item.label[1]}}：</label>
                            <select v-model='link2' @change='searchEvent'> 
                                <option v-for ="meun in linkmeuns" :value="meun.val">{{meun.label}}</option>      
                            </select>
                        </div>    
                    </template>
                    <template v-else-if="item.type=='time-rang'"><!--时间范围-->
                        <label>{{item.label}}：</label>
                        <input class="input_wrap time starttime startDateTime1" type="text" data-field="datetime"
                            data-startend="start" data-startendelem=".endDateTime1 " readonly >
                        <span class="timeline"></span>
                        <input class="input_wrap time endtime endDateTime1" type="text" data-field="datetime" 
                            data-startend="end" data-startendelem=".startDateTime1" readonly >
                        <div id="dtBox"></div>
                    </template>
                    <template v-else-if="item.type=='select'">
                        <label>{{item.label}}：</label>
                        <select v-model="select_val" @change="searchEvent" >
                            <option value="all">全部</option>
                            <option v-for="item in selectItem"  :value="item">{{item}}</option>
                        </select>
                    </template>
                    <template v-else>
                        <label>{{item.label}}：</label>
                        <inputs class="inputs_wrap" :type="item.type" :name="item.name" :regex="item.regex"
                        :emums="selectItem" @getVal="getVal"></inputs>
                    </template>
                </div>  
                                        
            </div>
            <div class="btns">
                <button class='button button--aylen' @click='searchEvent'>{{$t('common.filterBtn')}}</button>  
            </div>  
        </div> 
        <div v-if = "error_notice" style="color:#b63039;text-align: left; padding-left:20px">*{{error_msg}}</div>      		
		
	</div>
</template>
<script>
	import inputs from './inputs'
	import formatTest from 'libs/formatTest'
	import SystemService from 'services/systemService'
    let alllink = [
        {val:'',label:'全部'},
        {val:'1',label:'网口接入'},
        {val:'2',label:'网口断开'},
        {val:'3',label:'登录成功'},
        {val:'4',label:'用户注销'},
        {val:'5',label:'系统初始化'},
        {val:'6',label:'系统启动'},
        {val:'7',label:'中心连接'},
        {val:'8',label:'登录失败'},
        {val:'9',label:'中心断开'},
        {val:'10',label:'登录超限'},
    ]
    let normalink =[
        {val:'',label:'全部'},
        {val:'1',label:'网口接入'},
        {val:'2',label:'网口断开'},
        {val:'3',label:'登录成功'},
        {val:'4',label:'用户注销'},
        {val:'5',label:'系统初始化'},
        {val:'6',label:'系统启动'},
        {val:'7',label:'中心连接'},
    ]
    let warninglink =[
        {val:'',label:'全部'},
        {val:'8',label:'登录失败'},
        {val:'9',label:'中心断开'}
    ]
    let severelink =[
        {val:'',label:'全部'},
        {val:'10',label:'登录超限'}
    ]
	export default {
        props: {
           searchFiled:{
                type: Array
            },
            selectItem:{
                type: Array
            }
        },
		components: {
			inputs
		},
		data() {
			return{
				params:{},
                error_notice:false,
                format_error_arr:[],
                link1: null,
                link2:'',
                linkmeuns:[],
                alllink:alllink,
                normalink:normalink,
                warninglink:warninglink,
                severelink:severelink,
                select_val:'all'
			}
		},
		mounted() {
            this.link1 = ''
			$("#dtBox").DateTimePicker({
				dateTimeFormat: "yyyy-MM-dd HH:mm",
            }).css('display','none');
		},
        watch:{
            link1() {
                switch (this.link1) {
                     case '':
                         this.linkmeuns = this.alllink
                         break;
                    case '1':
                         this.linkmeuns = this.normalink
                         break;
                    case '2':
                         this.linkmeuns = this.warninglink
                         break;
                    case '3':
                         this.linkmeuns = this.severelink
                         break;
                     default:
                         break;
                 }
            }
        },
		methods: {
             getVal(name,val,format_test) {//接收inputs发送回来的值
                // 模糊搜索    
                if (name == 'mac') {
                    let valArr = val.split(':')
                    let macArr = []
                    for (let v of valArr) {
                        if (v) {
                            macArr.push(v)
                        }
                    }
                    this.params[name] = macArr.join(':')
                } else if (name.includes('ip')) {
                    let valArr = val.split('.')
                    let ipArr = []
                    for (let v of valArr) {
                        if (v) {
                            ipArr.push(v)
                        }
                    }
                    this.params[name] = ipArr.join('.')
                } else {
                    this.params[name] = val
                }
                // if (format_test) {
                    // this.params[name] = val
                //     this.error_notice = false
                //     let index = this.format_error_arr.indexOf(name)
                //     this.format_error_arr.splice(index,1)
                // } else {
                //     let format_error_arr = new Set([...this.format_error_arr,name])
                //     this.format_error_arr = [...format_error_arr]
                // }              
            },
            timestrap(time){
              return  (new Date(time).getTime())/1000
            },
            searchEvent() {
                this.params.oper='find'
                this.params.page=1
                for (let [k,v] of this.searchFiled.entries()) {
                    if (v.type=="time-rang") { 
                        let s_time = $('.starttime').val()
                        let e_time = $('.endtime').val()
                        this.params.start_time = s_time?this.timestrap(s_time):undefined
                        this.params.end_time = e_time?this.timestrap(e_time):undefined                     
                    }
                    if (v.type=="select_link") {
                        this.params[v.name[0]] = this.link1==''?undefined:this.link1       
                        this.params[v.name[1]] = this.link2==''?undefined:this.link2 
                    }
                    if (v.type=="select") { 
                         this.params[v.name] = this.select_val=='all'?undefined:this.select_val             
                    }
                }
                // var tese_val = this.testVal()      
                // if (tese_val) {
                    console.log(this.params.username)
                    this.$emit('searchEvent',this.params)                
                // }
            },
             testVal() {
                for(let i = 0; i < this.searchFiled.length; i++) {             
                    let label = this.searchFiled[i].label
                    let val = this.params[this.searchFiled[i].name]
                    let format_test = this.format_error_arr.indexOf(this.searchFiled[i].name)>=0//格式
                   if (format_test&&!val) {
                        this.error_notice = true
                        this.error_msg = label+"格式错误!"
                        return false
                    } else {
                        this.error_notice = false   
                    }              
                }
                 return true
            }
		}
	}
</script>
<style scoped>
    select{
        min-width: 112px;
        height: 25px;
        border-radius: 2px;
    }
    .search .pic{
        margin-left: 20px;
        display: flex;
        align-items: center;
        margin-top: 14px;
    }
    .inputs-wrap{
        position: relative;
    }
    .inputs{
        display: flex;
		align-items: center;	
        justify-content:flex-start;
        flex-wrap: wrap;
        margin-bottom: 20px;
        margin-left: 60px;
        width: 90%;
    }
    .btns{
        position: absolute;
        right: 0;
        bottom:0;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
    }
	.button {
		background: #ffae00;
		color: #ffffff;
		width: 100px;
		height: 25px;
		border-radius: 3px;
	}
    .items{
        margin-top: 10px;
        display: flex;
		align-items: center;     
    }
    .label-width label{
        width: 100px;
        margin-left:0;
    }
    label{
        margin-left:20px;
        text-align: right;
    }
    .line{
        border-left: 2px solid #E5E5E5;
        height: 15px;
        margin-right:10px;
    }
    .input_wrap{
        display: inline-block;
        width: 180px;	
        height: 25px;
        border: 1px solid  #e8e8e8;
        border-radius: 3px;
        box-sizing: border-box;
        color: #999;
        background: #ffffff;
        padding-left: 10px;
    }
    .timeline{
        width: 10px;
		display: inline-block;
		border-bottom: 1px solid #E0E0E0;
		margin: 0 5px;
		vertical-align: middle;
    }
</style>